<template>
  <div>
    <div class="body_shade" style="display: none;"></div>
    <div class="load">
      <div id="wave" class="wave">
        <img src="@/assets/img/phoenix-loadinng.png" style="position: absolute;z-index: 2;width: 100%;left: 0;top: 0PX;">
      </div>
    </div>
    <div class="container-fluid container-product-head">
      <div class="container">
        <div class="row">
          <ul id="myTab" class="nav nav-tabs">
            <li :class="{active: currentHash.substring(1) === item.id}" v-for="(item,index) in productData.tabs" :key="index">
              <a @click="changeTabe(item.id)" data-toggle="tab">{{ item.title }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container-fluid container-product-content">
      <div class="container">
        <div class="row">
          <div id="myTabContent" class="tab-content">
            <template v-for="item in productData.tabs" :key="item.id">
              <div v-for="(subitem, index) in item.content" :key="index" class="tab-pane fade in" :class="{ active: route.hash === `#${item.id}`}" :id="item.id">
                <img v-if="subitem.type === 'img'" :src="subitem.src" :class="{pzhm2: subitem.isPhone}" />
                <p v-else-if="subitem.type === 'text'">{{ subitem.content }}</p>
                <div v-else-if="subitem.type === 'gallery'" class="col-xs-12 dp_content">
                  <div v-for="img in subitem.images" :key="img" class="col-xs-6">
                    <img :src="img" />
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { isPhone } from '@/utils/public'
import productData from '@/assets/json/product.json'
import emitter from '@/utils/mitt'
const isPhoneFlag = ref(isPhone())
const route = useRoute()
// 获取哈希值
const currentHash = ref(route.hash);
const currentHashChange = ref('#shop')
const changeTabe = val => {
  currentHashChange.value = val
  emitter.emit('customEventHash', `#${val}`)
}
onMounted(() => {
  //load动画
  $('.load').fadeOut(1000)
  $('.navbar').addClass('active')
  if (isPhone()) {
    console.log('publice是手机端---', isPhoneFlag.value)
  } else {
    console.log('publice不--------是手机端---', isPhoneFlag.value)
  }
})
</script>

<style scoped>
@import '/oldwl/product.css';
</style>
